<script setup lang="ts">
import { hc } from "@/framework/vue/util/render";
import { FolderOpenOutlined } from "@ant-design/icons-vue";
import { showOpenDirectoryDialog } from "@/framework/util/dialogs";

defineOptions({ name: "folder-picker-input" });
defineProps({
  value: { type: String },
  placeholder: { type: String },
  disabled: { type: Boolean, default: false },
  readonly: { type: Boolean, default: false },
  allowClear: { type: Boolean, default: false },
  size: { type: String, default: "middle" },
  bordered: { type: Boolean, default: true },
  addonBefore: { type: String },
  addonAfter: { type: String },
  loading: { type: Boolean, default: false },
});

const emits = defineEmits({
  "update:value": (value: string) => true,
});

const handleInput = (e: Event) => {
  emits("update:value", (e.target as HTMLInputElement).value);
};

const handlePickFolder = async () => {
  const dir = await showOpenDirectoryDialog();
  if (dir) {
    emits("update:value", dir);
  }
};
</script>

<template>
  <div class="folder-picker-input">
    <a-input
      :value="value"
      @input="handleInput"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      :allow-clear="allowClear"
      :size="size"
      :bordered="bordered"
      spellcheck="false"
    />
    <a-button :icon="hc(FolderOpenOutlined)" @click="handlePickFolder" :loading="loading" />
  </div>
</template>

<style lang="less">
.folder-picker-input {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
</style>
